<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.customer')}}:
              </div>
              <div class="contant">
                <Loadselect
                  ref="uid"
                  :select_value="'uid'"
                  :select_label="'nickname'"
                  :modalName="'uid'"
                  :select_model="data.uid"
                  :select_options="options_customer"
                  @selectBlur="selectBlur('uid')"
                  @selectChang="LoadselectChange"
                  :isLazy="true"
                  @loadData="loadData"
                  @filterDataFun="filterDataFun"
                >
                </Loadselect>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.line')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="lid"
                  filterable
                  @blur="handleBlur('lid', $event)"
                  @change="handleChang('lid')"
                  v-model="data.lid"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_line"
                    :key="item.lid"
                    :label="item.name_current"
                    :value="item.lid"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Delivery_location')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="start_local"
                  filterable
                  @blur="handleBlur('start_local', $event)"
                  @change="handleChang('start_local')"
                  v-model="data.start_local"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_location"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.destination')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="target_local"
                  filterable
                  @blur="handleBlur('target_local', $event)"
                  @change="handleChang('target_local')"
                  v-model="data.target_local"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_destination"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.IsBrand')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="is_brand"
                  filterable
                  @blur="handleBlur('is_brand', $event)"
                  @change="handleChang('is_brand')"
                  v-model="data.is_brand"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_IsBrand"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.payment_method')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="pay_type"
                  filterable
                  allow-create
                  @blur="handleBlur('pay_type', $event)"
                  @change="handleChang('pay_type')"
                  v-model="data.pay_type"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_payment_method"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.currency')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="currency_type"
                  filterable
                  allow-create
                  @blur="handleBlur('currency_type', $event)"
                  @change="handleChang('currency_type')"
                  v-model="data.currency_type"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_currency"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="!!this.recive_data&&this.recive_data.is_show===1">
          <div class="dialogBoxTitle">{{this.recive_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.recive_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  :maxlength="Number(el.text_scale)==0?9999999:Number(el.text_scale)"
                  v-if="el.type===1"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  :min="0"  
                  :precision="Number(el.scale)"
                  v-model="el.val">
                </el-input-number>
                <el-input
                  :maxlength="Number(el.text_scale)==0?9999999:Number(el.text_scale)"
                  v-if="el.type===4||el.type===6"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  @input="()=>{el.val = el.val.replace(/[^\d]/g, '')}"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='dispatch_type'"
                  filterable
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @change="itemsChang(el.item_id,el)"
                  v-model="el.val"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_Delivery"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-if="el.type===5&&el.item_id==='contact_name'"
                  filterable
                  :ref="el.item_id"
                  allow-create
                  @blur="itemsBlur(el.item_id,el)"
                  @change="itemsChang(el.item_id,el)"
                  v-model="el.val"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_addrs"
                    :key="item.table_code"
                    :label="item.contact_name"
                    :value="item.contact_name"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="!!this.pickup_data&&this.pickup_data.is_show===1">
          <div class="dialogBoxTitle">{{this.pickup_data.name}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in this.pickup_data.list" :key="k">
              <div class="title">
                <div v-if="el.is_require===1" class="RequiredRowTip">*</div>
                {{el.name}}:
              </div>
              <div class="contant">
                <el-input
                  :maxlength="Number(el.text_scale)==0?9999999:Number(el.text_scale)"
                  v-if="el.type===1"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  :min="0"  
                  :precision="Number(el.scale)"
                  v-model="el.val">
                </el-input-number>
                <el-input
                  :maxlength="Number(el.text_scale)==0?9999999:Number(el.text_scale)"
                  v-if="el.type===4||el.type===6"
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @focus="itemsFocus(el.item_id,el)"
                  @input="()=>{el.val = el.val.replace(/[^\d]/g, '')}"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="el.val"
                ></el-input>
                <el-select
                  v-if="el.type===5&&el.item_id==='pickup_type'"
                  filterable
                  :ref="el.item_id"
                  @blur="itemsBlur(el.item_id,el)"
                  @change="itemsChang(el.item_id,el)"
                  v-model="el.val"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_take"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top" v-if="!!this.goods_data&&this.goods_data.is_show===1">
          <div class="dialogBoxTitle">{{this.goods_data.name}}</div>
          <div style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem('goods')">
              <img style="width:12px;height:12px;" src="../../../assets/img/add.png" alt="">
              <span>{{$t('common.Add')}}</span>
            </div>
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="delItem('goods')">
              <img style="width:12px;height:12px;" src="../../../assets/img/del.png" alt="">
              <span>{{$t('common.del')}}</span>
            </div>
          </div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          @sendCurrentData="setCurrent_goods"
          @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-input
                  v-fo 
                  v-if="scope.config.templateType=='Input'"
                  :maxlength="Number(scope.config.text_scale)==0?9999999:Number(scope.config.text_scale)"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="scope.config.precision" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number> 
                <el-date-picker
                  v-fo 
                  v-else-if="scope.config.templateType=='DatePicker'"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                >
                </el-date-picker>
                <el-input
                  v-fo 
                  v-else-if="scope.config.templateType=='InputScale'"
                  :maxlength="Number(scope.config.text_scale)==0?9999999:Number(scope.config.text_scale)"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  @input="()=>{scope.row[scope.config.prop] = scope.row[scope.config.prop].replace(/[^\d]/g, '')}"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div v-if="is_show_insure" class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.buy_insurance')}}:
              </div>
              <div class="contant">
                <el-switch
                  :disabled="insure_is_required"
                  v-model="data.is_insure"
                  @change="switchChange()"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#26BD00"
                  >
                </el-switch>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="insure_is_required" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <el-input-number
                  :disabled="data.is_insure!==0"
                  controls-position="right"
                  size="small" 
                  ref="insure_price" 
                  @blur="handleBlur('insure_price', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setInsureCost"
                  :min="premium_min" 
                  :precision="2"
                  :max="premium_max"
                  v-model="data.insure_price">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="insure_is_required" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input-number
                  :disabled="data.is_insure!==0"
                  controls-position="right"
                  size="small" 
                  ref="premium_rate" 
                  @blur="handleBlur('premium_rate', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setInsureCost"
                  :min="0"  
                  :precision="2"
                  v-model="data.premium_rate">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_remarks')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="contant">
                <el-input
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.remark"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      data:{
        uid:'',
        lid:'',
        start_local:'',
        target_local:'',
        is_brand:'',
        pay_type:'',
        currency_type:'',
        is_insure:'',
        insure_price:'',
        insure_type:'',
        bw_rate:'',
        insure_unit_price:'',
        premium_rate:'',
        insure_costs:'',
        remark:'',
      },
      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      options_customer:[],
      options_line:[],
      options_location:[],
      options_destination:[],
      options_Delivery:[],
      options_addrs:[],
      options_take:[],
      options_IsBrand:[],
      options_payment_method:[],
      options_currency:[],
      is_show_insure:false,//是否可以买保险
      insure_is_required:false,//保险是否强制购买
      compensation_max:0,//赔付货值最大值
      premium_min:0,//保险费最小值
      premium_max:0,//保险费最大值
      options_protection:[],
      goods_data:{},//商品配置项
      pickup_data:{},//提货信息配置项
      recive_data:{},//收货信息配置项
      tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
          templateType:'InputNumber_Num',
        },
        
      ],
      tableData_goods: [],
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      //获取客户列表
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
      this.$get("lineSysItems").then((res) => {
        this.options_IsBrand = res.data.is_brand;
        this.options_payment_method=res.data.pay_type
      });
      this.$get("orderSysItems").then((res) => {
        this.options_currency = res.data.currency_type;
        this.data.currency_type=this.options_currency[0].id
      });
    },
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.options_customer.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(name){
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.filterDataFun('')
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    LoadselectChange(obj){
      this.data[obj.name]=obj.value
      if(obj.name=='uid'){
        //获取线路列表
        this.$get("orderLines",{uid:this.data.uid,line_type:1}).then((res) => {
          this.options_line = res.data;
        });
        this.options_addrs=this.options_customer.filter(item=>{return item.uid==this.data.uid})[0].receive_addrs
      }
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    addItem(name){
      if(name=='goods'){
        let obj={
          id:this.tableData_goods.length+1,
          goods_name:'',
          goods_price:'',
          goods_num:'',
        }
        this.tableData_goods.push(obj)
        this.tableData_goods.forEach((item,k)=>{
          item.table_code=k+1
        })
      }
    },
    delItem(name){
      if(name=='goods'){
        this.tableData_goods=this.tableData_goods.filter(item=>{return item.id!=this.sendDataObj_goods.id})
        this.tableColumn_goods.forEach((item,k)=>{
          item.table_code=k+1
        })
      }
    },
    // 提交修改
    confirm() {
      let type=true
      if (!this.data.uid&&this.data.uid!==0) {
        this.$refs.uid.$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.lid&&this.data.lid!==0) {
        this.$refs.lid.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.start_local&&this.data.start_local!==0) {
        this.$refs.start_local.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.target_local&&this.data.target_local!==0) {
        this.$refs.target_local.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.is_brand&&this.data.is_brand!==0) {
        this.$refs.is_brand.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.pay_type&&this.data.pay_type!==0) {
        this.$refs.pay_type.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.currency_type&&this.data.currency_type!==0) {
        this.$refs.currency_type.$el.childNodes[1].childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if(!!this.recive_data&&this.recive_data.is_show===1&&this.recive_data.list.length>0){
        this.recive_data.list.forEach(item=>{
          if(item.type===3){
            if(!item.val&&item.is_require===1){
              this.$refs[item.item_id][0].$el.childNodes[2].childNodes[1].style.border='1px solid red'
              type=false
            }
          } else if(item.type===5){
            if (!item.val&&item.val!==0&&item.is_require===1) {
              this.$refs[item.item_id][0].$el.childNodes[1].childNodes[1].style.border='1px solid red'
              type=false
            }
          } else {
            if(!item.val&&item.is_require===1){
              this.$refs[item.item_id][0].$el.childNodes[1].style.border='1px solid red'
            }
          }
        })
      }
      if(!!this.pickup_data&&this.pickup_data.is_show===1&&this.pickup_data.list.length>0){
        this.pickup_data.list.forEach(item=>{
          if(item.type===3){
            if(!item.val&&item.is_require===1){
              this.$refs[item.item_id][0].$el.childNodes[2].childNodes[1].style.border='1px solid red'
              type=false
            }
          } else if(item.type===5){
            if (!item.val&&item.val!==0&&item.is_require===1) {
              this.$refs[item.item_id][0].$el.childNodes[1].childNodes[1].style.border='1px solid red'
              type=false
            }
          } else {
            if(!item.val&&item.is_require===1){
              this.$refs[item.item_id][0].$el.childNodes[1].style.border='1px solid red'
            }
          }
        })
      }
      if(this.insure_is_required){
        if(!this.data.insure_price){
          this.$refs.insure_price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.data.premium_rate){
          this.$refs.premium_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }else{
        if(this.data.is_insure===0){
          if(!this.data.insure_price){
            this.$refs.insure_price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
            type=false
          }
          if(!this.data.premium_rate){
            this.$refs.premium_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
            type=false
          }
        }
      }
      let isGoodsComplete=true
      if(!!this.goods_data&&!!this.goods_data.is_show){
        if(this.tableData_goods.length==0){
          this.$message.warning(this.$t('ExpressOrderManagementLang.good_message1'));
          type=false
        }else{
          if(this.goods_data.list.length>0){
            this.tableData_goods.forEach(item=>{
              this.goods_data.list.forEach(el=>{
                if(el.is_require===1&&!item[el.item_id]&&item[el.item_id]!==0){
                  isGoodsComplete=false
                  type=false
                }
              })
            })
          }
        }
      }
      if(!isGoodsComplete){
        this.$message.warning(this.$t('ExpressOrderManagementLang.good_message2'));
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        this.recive_arr=[]
        if(!!this.recive_data.list&&this.recive_data.list.length>0){
          this.recive_data.list.forEach(el=>{
            let obj={
              id:el.item_id,
              val:el.val
            }
            this.recive_arr.push(obj)
          })
        }
        this.pickup_arr=[]
        if(!!this.pickup_data.list&&this.pickup_data.list.length>0){
          this.pickup_data.list.forEach(el=>{
            let obj={
              id:el.item_id,
              val:el.val
            }
            this.pickup_arr.push(obj)
          })
        }
        let params = new FormData();
        
        params.append("uid", this.data.uid);
        params.append("lid", this.data.lid);
        params.append("start_local", this.data.start_local);
        params.append("target_local", this.data.target_local);
        params.append("is_brand", this.data.is_brand);
        params.append("pay_type", this.data.pay_type);
        params.append("currency_type", this.data.currency_type);
        params.append("is_insure", this.data.is_insure);
        params.append("insure_price", this.data.insure_price);
        params.append("premium_rate", this.data.premium_rate);
        params.append("remark", this.data.remark);
        params.append("recive_information", JSON.stringify(this.recive_arr));
        params.append("pickup_information", JSON.stringify(this.pickup_arr));
        params.append("goods", JSON.stringify(this.tableData_goods));

        this.$postForm("addShippingOrder", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    setCurrent_goods (data){
      this.sendDataObj_goods=data
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    //取消修改
    cancel() {
      this.data={
        uid:'',
        lid:'',
        start_local:'',
        target_local:'',
        is_brand:'',
        pay_type:'',
        currency_type:'',
        is_insure:'',
        insure_price:'',
        insure_type:'',
        bw_rate:'',
        insure_unit_price:'',
        premium_rate:'',
        insure_costs:'',
        remark:'',
      }
      this.options_line=[],
      this.options_location=[],
      this.options_destination=[],
      this.options_Delivery=[],
      this.options_take=[],
      this.tableData_goods=[],
      this.options_IsBrand=[],
      this.options_payment_method=[],
      this.options_currency=[]
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.is_show_insure=false
      this.insure_is_required=false
      this.goods_data={}
      this.pickup_data={}
      this.recive_data={}
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if(name=='insure_price'||name=='premium_rate'){
        if(this.insure_is_required){
          if (!this.data[name]&&this.data[name]!==0) {
            event.target.style.border = "1px solid red";
          }
        }else{
          if(this.data.is_insure===0){
            if (!this.data[name]&&this.data[name]!==0) {
              event.target.style.border = "1px solid red";
            }
          }
        }
      }else if(name=='bw_rate'){
        if (!this.data[name]&&this.data[name]!==0&&this.data.insure_type==3) {
          event.target.style.border = "1px solid red";
        }
      }else{
        if (!this.data[name]&&this.data[name]!==0) {
          event.target.style.border = "1px solid red";
        }
      }
    },
    // 计算保险费
    setInsureCost(){
      this.data.insure_costs=this.$computing(this.data.insure_price*this.data.premium_rate/100,'fixed',4)
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if(data=='lid'){
        let arr=this.options_line.filter(item=>{return item.lid===this.data.lid})
        if(arr.length>0&&this.data.parent_id!==0){
          this.options_location =arr[0].start_local_arr
          this.options_destination =arr[0].target_local_arr
          this.options_Delivery =arr[0].dispatch_type_arr
          this.options_take =arr[0].pickup_type_arr
          if(this.options_location.length>0){
            this.data.start_local=this.options_location[0].id
            this.$refs.start_local.$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
          }
          if(this.options_destination.length>0){
            this.data.target_local=this.options_destination[0].id
            this.$refs.target_local.$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
          }
          if(this.options_Delivery.length>0){
            this.data.dispatch_type=this.options_Delivery[0].id
          }
          if(this.options_take.length>0){
            this.data.pickup_type=this.options_take[0].id
          }
          this.data.is_brand=arr[0].is_brand
          this.data.insure_type=arr[0].insure_type
          this.data.bw_rate=arr[0].bw_rate
          this.data.insure_unit_price=arr[0].insure_unit_price
          this.is_show_insure=arr[0].is_insure==0
          this.insure_is_required=arr[0].is_force==1
          if(this.insure_is_required){
            this.data.is_insure=0
          }
          // this.data.premium_rate=arr[0].premium_rate
          this.compensation_max=Number(arr[0].compensation_max)
          this.premium_min=Number(arr[0].premium_min)
          this.premium_max=Number(arr[0].premium_max)
          this.$get("getItemsByLid", { lid: this.data.lid}).then((res) => {
            if(!!res.data.goods_info&&res.data.goods_info.list.length>0){
              this.goods_data=res.data.goods_info
              this.tableColumn_goods=[
                {
                  label: "",
                  prop: "table_code",
                  width:40,
                },
              ]
              this.goods_data.list.forEach(item=>{
                let obj={}
                if(item.type===1){
                  obj={
                    checked: true,
                    label: item.name,
                    prop: item.item_id.toString(),
                    width: item.width,
                    templateType:'Input',
                    text_scale:Number(item.text_scale),
                  }
                }else if(item.type===2){
                  obj={
                    checked: true,
                    label: item.name,
                    prop: item.item_id.toString(),
                    width: item.width,
                    templateType:'DatePicker',
                  }
                }else if(item.type===3){
                  obj={
                    checked: true,
                    label: item.name,
                    prop: item.item_id.toString(),
                    width: item.width,
                    templateType:'InputNumber',
                    precision:Number(item.scale),
                  }
                }else if(item.type===4||item.type===6){
                  obj={
                    checked: true,
                    label: item.name,
                    prop: item.item_id.toString(),
                    width: item.width,
                    templateType:'InputScale',
                    text_scale:Number(item.text_scale),
                  }
                }
                this.tableColumn_goods.push(obj)
              })
            }
            if(!!res.data.pickup_info&&res.data.pickup_info.list.length>0){
              this.pickup_data=res.data.pickup_info
            }
            if(!!res.data.recive_info&&res.data.recive_info.list.length>0){
              this.recive_data=res.data.recive_info
            }
          });
        }
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    // 判断了额外项是否有数据
    itemsFocus(name,data) {
      if(data.type!==3){
        this.$refs[name][0].$el.childNodes[1].style.border='1px solid #E0E3E9'
      } else if(data.type===3){
        this.$refs[name][0].$el.childNodes[2].childNodes[1].style.border='1px solid #E0E3E9'
      } 
      
    },
    itemsBlur(name,data) {
        
      if(data.type===3){
        if(!data.val&&data.is_require===1){
          this.$refs[name][0].$el.childNodes[2].childNodes[1].style.border='1px solid red'
        }
      } else if(data.type===5){
        if(!data.val&&data.is_require===1){
        this.$refs[name][0].$el.childNodes[1].childNodes[1].style.border='1px solid red'
        }
      } else {
        if(!data.val&&data.is_require===1){
          this.$refs[name][0].$el.childNodes[1].style.border='1px solid red'
        }
      }
    },
    itemsChang(name,data) {
      if (data.val.length==0) {
        this.$refs[name][0].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[name][0].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    switchChange(){
      if(this.data.is_insure===1){
        this.data.insure_price=""
        this.data.premium_rate=""
        this.data.insure_costs=""
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>